<template>
  <div class="gradient-border" v-on="$listeners" :style="{ background, borderRadius, padding: outPadding }">
    <div class="gradient-content" :style="{ padding: myPadding, background: bgColor }">
      <slot name="default"></slot>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  props: {
    /**
     * 边框宽度，太宽可能会有问题
     * 上右下左
     */
    size: {
      type: [String, Array],
    },
    /**
     * 边框颜色
     */
    color: {
      type: [String, Array],
    },
    bgColor: {
      type: String,
    },
    radius: {
      type: [Number, String],
    },
    padding: {
      type: [Number, String, Array],
    },
    direction: {
      type: [Number, String],
      default: "right",
    },
  },
  data() {
    return {};
  },
  methods: {
    getNumber(num) {
      if (!isNaN(num)) return `${(num / 37.5).toFixed(4)}rem`;
      return num;
    },
  },
  computed: {
    background() {
      if (this.color) {
        const color =
          typeof this.color === "string" ? this.color : this.color.join(",");
        if (!color.includes(",")) return color;
        const direction = isNaN(this.direction)
          ? `to ${this.direction}`
          : `${this.direction}deg`;

        return `linear-gradient(${direction}, ${color})`;
      } else {
        return "";
      }
    },
    borderRadius() {
      return this.getNumber(this.radius);
    },
    outPadding() {
      return this.getNumber(this.size);
    },
    myPadding() {
      let padding = this.padding;
      if (typeof padding === "string") {
        if (padding.includes(" ")) {
          return padding
            .split(" ")
            .map((item) => this.getNumber(item))
            .join(" ");
        } else {
          return this.getNumber(padding);
        }
      } else if (typeof padding === "number") {
        return this.getNumber(padding);
      } else if (Array.isArray(padding)) {
        return padding.map((item) => this.getNumber(item)).join(" ");
      } else {
        return "";
      }
    },
  },
};
</script>

<style scoped lang="less">
.gradient-border {
  padding: var(--border-width, 1px);
  background-image: var(--border-color,
      linear-gradient(to right, #FFE597, #FFCF75));
  border-radius: 15px;
  overflow: hidden !important;

  .gradient-content {
    height: 100%;
    width: 100%;
    background: var(--bg-color, #212029);
    padding: var(--padding, 0px);
    overflow: auto;
    border-radius: inherit;
  }
}
</style>